<template>
  <div>
    <div id="mountNode" class="dashboard"/>
  </div>

</template>

<script type="text/ecmascript-6">
  import G2 from '@antv/g2'
  export default {
    name: 'Dashboard',
    data() {
      return {
        chart: null,
        personInfo: {
          user_score : Math.random() * 6
        },  //数据
      }
    },

    props:{
      show: String,  //定义传值的类型
      basic: Boolean, //无需理会，本人项目中需要的
      idenId: Boolean  //无需理会，本人项目中需要的
    },
    created() {
    },
    mounted() {
      this.getScore();
    },

    methods:{
      getScore() {
        this.drawChart();

      },
      //仪表
      drawChart() {
        var data = [];
        var now = new Date();
        var time = now.getTime();
        var value1 = ~~20 + Math.random() * 10;
        var direction = Math.random() > 0.5 ? 1 : -1;
        var value2 = value1 + Math.random() * 5 * direction;
        data.push({
          time: time,
          value: value2,
          type: '上一周期 '
        });
        data.push({
          time: time,
          value: value1,
          type: '实时'
        });
        var chart = new G2.Chart({
          container: 'mountNode',
          forceFit: true,
          height: window.innerHeight * 0.5,
          padding: [10, 100, 50, 50]
        });
        chart.source(data, {
          time: {
            alias: '时间',
            type: 'time',
            mask: 'MM:ss',
            nice: false
          },
          value: {
            alias: '占用率',
            min: 0,
            max: 40
          },
          type: {
            type: 'cat'
          }
        });
        chart.axis('predict', false);
        chart.legend({
          attachLast: true
        });
        chart.legend('predict', false);
        chart.line().position('time*value').shape('smooth').color('type', ['#cccccc', '#2593fc']).size(2).animate({
          update: {
            duration: 0
          }
        });
        chart.guide().line({
          top: true,
          start: ['min', 30],
          end: ['max', 30],

          lineStyle: {
            stroke: '#F5222D',
            lineWidth: 2
          },
          text: {
            content: '预警线',
            position: 'start',
            offsetX: 20,
            offsetY: -5,
            style: {
              fontSize: 14,
              fill: '#F5222D',
              opacity: 0.5
            }
          }
        });
        chart.guide().regionFilter({
          top: true,
          start: ['min', 30],
          end: ['max', 40],
          color: '#F5222D',
          apply: ['line']
        });
        chart.guide().dataMarker({
          top: true,
          content: '当前最大峰值',
          position: function position() {
            var obj = findMax();
            if (obj) {
              return [obj.time, obj.value];
            }
            return [0, 0];
          },

          style: {
            text: {
              fontSize: 13
            },
            point: {
              stroke: '#606060'
            }
          },
          lineLength: 50
        });
        chart.render();
        setInterval(function() {
          var now = new Date();
          var time = now.getTime();
          var value1 = ~~20 + Math.random() * 10;
          var direction = Math.random() > 0.5 ? 1 : -1;
          var value2 = value1 + Math.random() * 5 * direction;
          if (data.length >= 200) {
            data.shift();
            data.shift();
          }
          data.push({
            time: time,
            value: value2,
            type: '上一周期'
          });
          data.push({
            time: time,
            value: value1,
            type: '实时'
          });

          if (data.length > 20) {
            data.shift();
            data.shift();
          }
          chart.changeData(data);
        }, 1000);

        function findMax() {
          var maxValue = 0;
          var maxObj = null;
          for (var i = 0; i < data.length; i++) {
            var d = data[i];
            if (d.value > maxValue /* && d.type === 'today'*/ ) {
              maxValue = d.value;
              maxObj = d;
            }
          }
          return maxObj;
        }
      },
      //显示的刻度中的一些html元素，如：中间的分数
      isShow(personInfo){
        var html='';
        //判断无需理会，直接取其中的一段即可
        if(this.show=='home'){
          html=
            ` <div style="width: 300px;color: #fff;text-align: center;">
                        <p style="font-size: 12px;">BETA</p>
                        <p style="font-size: 38px;font-weight: bold;"> ${personInfo.user_score}</p>
                        <p style="font-size: 15px;" class="abc">分</p>
                        </div>`;

        }else {
          html= ` <div style="width: 300px;color: #fff;text-align: center;">
                        <p style="font-size: 19px;font-weight: bold;">分：${personInfo.user_score}</p>
                        <p style="margin-top:8px;font-size: 19px;font-weight: bold;">度：${personInfo.user_amount}</p>
                        </div>`;
        }
        return html;
      },

    }

  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">

</style>
